<template>
    <div>
        <el-row :gutter="20" style="line-height:40px">
            <el-form :inline="true" :model="content" class="demo-form-inline">
                <el-col :span="6">
                    <el-form-item label="查询订单号">
                        <el-input v-model="content.id" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3" :offset="1">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="8">
                    <el-button icon="el-icon-s-order" @click="selectByMouth">查询当月完成订单</el-button>
                </el-col>
            </el-form>
        </el-row>
        <el-table :data="tableData" border style="width: 100% ; line-height: 30px;" v-loading="loading"
            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <el-table-column fixed prop="id" label="订单号" width="150">
            </el-table-column>
            <el-table-column prop="orderTime" label="下单时间" width="150">
            </el-table-column>
            <el-table-column prop="consignee" label="收件人" width="150">
            </el-table-column>
            <el-table-column prop="consigneeAddress" label="收件地址" width="150">
            </el-table-column>
            <el-table-column prop="consigneePhone" label="收件人预留电话" width="200">
            </el-table-column>
            <el-table-column prop="marketerName" label="商家名称" width="150">
            </el-table-column>
            <el-table-column prop="marketerAddress" label="商家地址" width="150">
            </el-table-column>
            <el-table-column prop="marketerPhone" label="商家预留电话" width="150">
            </el-table-column>
            <el-table-column label="操作" width="350">
                <template slot-scope="scope">
                    <el-tag type="success">已派送</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="pageination.total"
            :current-page.sync="pageination.currentPage" :page-size="pageination.size" @current-change="currentChange">
        </el-pagination>
    </div>
</template>
<script>
import {getCompletedOrderData,completedOrderSearch,selectByMouth} from '@/utils/modules/employee.js'
export default{
    mounted(){
        this.getCompletedOrderData()
    },
    data(){
        return{
            content:{
                id:'',
            },
            tableData:[],
            loading:true,
            pageination:{
                total:1000,
                currentPage:1,
                size:6
            },
            flag:1
        }
    },
    methods:{
        onSubmit(){
            this.flag=2
            this.pageination.currentPage = 1
            completedOrderSearch({'id':this.content.id,'currentPage':this.pageination.currentPage}).then(res=>{
                this.assignment(JSON.parse(JSON.stringify(res.data.itemList)))
                this.pageination.total = res.data.total
            }).catch(err=>{
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        onSubmit2(){
            this.flag=2
            completedOrderSearch({'id':this.content.id,'currentPage':this.pageination.currentPage}).then(res=>{
                this.assignment(JSON.parse(JSON.stringify(res.data.itemList)))
                this.pageination.total = res.data.total
            }).catch(err=>{
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        currentChange(val){
            this.pageination.currentPage = val
            if(flag == 1){
                this.getSuspenseOrderData()
            }else if(flag == 2){
                this.onSubmit2()
            }else{
                this.selectByMouth2()
            }
        },
        // 查询已完成订单
        getCompletedOrderData() {
            getCompletedOrderData(this.pageination).then(res => {
                console.log(res)
                let data = JSON.parse(JSON.stringify(res.data.itemList))
                this.pageination.total = res.data.total
                this.assignment(data)
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        selectByMouth(){
            this.flag = 3
            this.pageination.currentPage = 1
            selectByMouth(this.pageination).then(res=>{
                this.assignment(JSON.parse(JSON.stringify(res.data.itemList)))
                this.pageination.total = res.data.total
            }).catch(err=>{
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        selectByMouth2(){
            this.flag = 3
            selectByMouth(this.pageination).then(res=>{
                this.assignment(JSON.parse(JSON.stringify(res.data.itemList)))
                this.pageination.total = res.data.total
            }).catch(err=>{
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        assignment(val){
            let data = val
                this.tableData = []
                for (let i = 0; i < data.length; i++) {
                    let consigneeAddress = data[i].consigneeProvince + data[i].consigneeCity + data[i].consigneeDistrict + data[i].consigneeDetail
                    let marketerAddress = data[i].marketerProvince + data[i].marketerCity + data[i].marketerDistrict + data[i].marketerDetail
                    if(data[i].marketerLabel != null){
                        marketerAddress += data[i].marketerLabel
                    }
                    if(data[i].consigneeLabel != null){
                        consigneeAddress += data[i].consigneeLabel
                    }
                    this.tableData.push({
                        'consigneeAddress': consigneeAddress,
                        'marketerAddress': marketerAddress,
                        'consigneePhone': data[i].consigneePhone,
                        'marketerPhone': data[i].marketerPhone,
                        'id': data[i].orderId,
                        'consignee': data[i].consignee,
                        'marketerName': data[i].marketerName,
                        'orderTime':data[i].orderTime
                    })
                }
                this.loading = false
        }
    }
}
</script>